[NO-ISSUE] feat(webkit): add Item inline kind, Item.List, and CardBox padded prop#719
Open
gab-az wants to merge 1 commit into
Open
[NO-ISSUE] feat(webkit): add Item inline kind, Item.List, and CardBox padded prop#719gab-az wants to merge 1 commit into
gab-az wants to merge 1 commit into
Conversation
… padded prop Add an 'inline' Item kind (removes outer padding), a divided in-card Item.List sub-component (forces default kind), a gapped Item.Group that forces inline, and an optional CardBox 'padded' prop (default true). asChild rows now draw the focus-visible ring and hover/active states. Storybook stories migrated to the toSfc source pattern and widened to w-full.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Extends the Item compound and CardBox to support the Figma "list of items in a card" and inline-on-page patterns.
inlinekind — newkind="inline"value that removes the row's outer padding (transparent surface); gap is preserved.Item.List(new sub-component,./item-list) — divided in-card list: full-width bottom dividers between rows (--border-muted), no gap. Forces its items to thedefaultkind so they never draw a per-item box inside the CardBox.Item.Group— now a gapped (--spacing-lg) off-card list that forces its items toinline, avoiding a box-in-box effect.paddedprop (optional, defaulttrue) — pads the content region; setpadded=falsefor flush, edge-to-edge content such as anItem.List.asChildis set, the merged row (e.g. an anchor) now draws thefocus-visiblering and hover/active ghost layers, so whole-row links are keyboard- and pointer-legible.Notes
paddeddefaults totrue, and the three CardBox consumers that pad their own content (onboarding-form,plan-success,deploy-success) were set to:padded="false"so they render identically. The CardBoxDefaultstory drops its inner padding to demonstrate the new default.Itemplaced insideItem.GrouporItem.Listhas itskindcoerced (toinline/defaultrespectively) via a provided container context. Standalone Items are unaffected.toSfc"Show code" source pattern and widened tow-full; addedWithList,WithListAsChild, andInlinestories. Specs (item,card-box) updated with refreshed checksums.